<template>
    <div class="payPage">
      <!-- header -->
      <div class="search_header">
        <van-nav-bar
          title="订单结算台"
          left-arrow
          @click-left="$router.go(-1)"
          fixed
        />
      </div>
      <div class="pay_content">
        <!-- 地址栏 -->
        <div class="pay_address" v-if="address">
          <van-icon name="location-o" size="25px"/>
          <div class="address_text">
            <p>{{ address.name }} {{ address.phone }}</p>
            <p>{{ longAddress }}</p>
          </div>
        </div>
        <hr>
        <!-- 商品展示 -->
        <div class="pay_goods"
          v-for="item in order.goodsList"
          :key="item.goods_id"
          >
          <img :src="item.goods_image" width="100px">
          <div class="text_other">
            <p>{{ item.goods_name }}</p>
            <div class="goods_num">
                <span>x{{ item.total_num }}</span>
                <span style="color: red;">￥{{ item.total_pay_price }}</span>
            </div>
          </div>
        </div>
        <!-- 细节区域 -->
        <div class="pay_detail">
          <div class="pay_total">
            <p>共{{ order.orderTotalNum }}件商品，合计：<span style="color: red;">￥{{ order.orderTotalPrice }}</span></p>
          </div>
          <div style="height: 30px;display: flex; justify-content: space-between;">
            <p>订单总金额：</p>
            <p style="color: red;">￥{{ order.orderTotalPrice }}</p>
          </div>
          <div style="height: 30px; display: flex; justify-content: space-between;">
            <p>优惠券：</p>
            <p>无优惠券可用</p>
          </div>
          <div style="height: 30px; display: flex; justify-content: space-between;">
            <p>配送费用：</p>
            <p style="color: red;">+￥0.00</p>
          </div>
          <div style="height: 30px;">
            <p>支付方式</p>
            <div style="height: 30px;">
              <van-icon name="balance-o" />余额支付（可用￥{{ personal.balance }}元）
            </div>
          </div>
          <div style="margin-top: 20px;">
            <p>选填：买家留言（50字以内）</p>
            <textarea v-model="remark" cols="40" rows="3"></textarea>
          </div>
        </div>
        <!-- 底部-->
        <div class="pay_footer">
          <span>实付款：￥{{ order.orderTotalPrice }}</span>
          <button @click="enterOrder">提交订单</button>
        </div>
      </div>
    </div>
</template>

<script>
import { getAddress } from '@/api/address'
import { getPay } from '@/api/pay'
import { setOrder } from '@/api/order'
import { Toast } from 'vant'

export default {
  name: 'PayIndex',
  data () {
    return {
      address: {
        address_id: 10012,
        name: '张小',
        phone: '18999292929',
        province_id: 782,
        city_id: 783,
        region_id: 785,
        detail: '北京路1号楼8888室',
        user_id: 10003,
        region: {
          province: '上海',
          city: '上海市',
          region: '徐汇区'
        }
      },
      order: {}, // 购买品
      personal: {},
      remark: '' // 留言
    }
  },
  computed: {
    longAddress () {
      const res = this.address.region
      return res.city + res.province + res.region + this.address.detail
    },
    // 获取地址栏参数
    mode () {
      return this.$route.query.mode
    },
    cartIds () {
      return this.$route.query.cartIds
    },
    goodsId () {
      return this.$route.query.goodsId
    },
    goodsNum () {
      return this.$route.query.goodsNum
    },
    goodsSkuId () {
      return this.$route.query.goodsSkuId
    }
  },
  created () {
    this.getAddress()
    this.getPay()
  },
  methods: {
    async getAddress () {
      const { data: { list } } = await getAddress()
      // console.log(list)
      if (list.length > 0) {
        this.address = list
      }
      // console.log(this.address.name)
      // console.log(this.mode)
    },
    async getPay () {
      if (this.mode === 'buyNow') {
        const { data: { order, personal } } = await getPay(this.mode, {
          goodsId: this.goodsId,
          goodsNum: this.goodsNum,
          goodsSkuId: this.goodsSkuId
        })
        this.order = order
        this.personal = personal
      }
      if (this.mode === 'cart') {
        const { data: { order, personal } } = await getPay(this.mode, {
          cartIds: this.cartIds
        })
        this.order = order
        this.personal = personal
      }
      // console.log(this.order)
      // console.log(this.personal)
    },
    async enterOrder () {
      if (this.mode === 'buyNow') {
        const res = await setOrder(this.mode, {
          goodsId: 10038,
          goodsNum: this.goodsNum,
          goodsSkuId: this.goodsSkuId,
          remark: this.remark
        })
        console.log(res)
      }
      if (this.mode === 'cart') {
        const res = await setOrder(this.mode, {
          cartIds: this.cartIds,
          remark: this.remark
        })
        console.log(res)
      }
      Toast.success('支付成功！')
      this.$router.replace('/order')
    }
  }

}
</script>

<style scoped>
  .payPage{
    font-size: 18px;
  }
  .pay_content{
    padding-top: 46px;
    padding-bottom: 34px;
  }
  .pay_address{
    margin-left: 10px;
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
  }
  .address_text{
    margin-left: 10px;
    font-size: 18px;
  }
  hr{
    margin-top: 5px;
    background-color: #777;
    height: 5px;
  }
  .pay_goods{
    width: 100%;
    height: 110px;
    margin-top: 5px;
    padding: 5px;
    display: flex;
    justify-content: space-between;
  }
  .text_other{
    margin-left: 5px;
    /* 两个元素，一上一下 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .text_other p{
    /* p标签设置仅显示两行 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .text_other .goods_num{
    display: flex;
    justify-content: space-between;
  }
  .pay_total{
    text-align: right;
  }
  .pay_footer{
    width: 100%;
    padding: 5px;
    position: fixed;
    left: 0px;
    bottom: 0px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
  }
  .pay_footer button{
    background-color: #f13a3a;
    color: white;
    border: none;
  }
</style>
